<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Canvas花火</title>
<style type="text/css">
body {
	background: #000000;
}
</style>
<!--[if lt IE 9]>
<script src="/static/js/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/static/js/jCanvaScript.1.5.18.min.js">

</script>
<script type="text/javascript">
	var stop1, stop2, stop3, stop4, stop5, stop6, stop7, no1 = 1, no2 = 1, ido1, ido2, ran;
	//花火の準備
	function hana(idCanvas) {
		myo1 = 'myObject_1_' + no1++;
		myo2 = 'myObject_2_' + no1;
		myo3 = 'myObject_3_' + no1;
		myo4 = 'myObject_4_' + no1;
		myo5 = 'myObject_5_' + no1;
		myh1 = 'myHanabi1_' + no1;
		myh2 = 'myHanabi2_' + no1;
		myh3 = 'myHanabi3_' + no1;
		ido1 = Math.floor(Math.random() * 570);
		ran = Math.floor(Math.random() * 50);
		//一つ目の花火
		fireworks(ran, 0, 0, 0, idCanvas);
		jc.myObject(125 + ido1, 120, 3, 3, 'rgba(0,153,0,1)', 40, true).opacity(0).id(myo1);
		jc.myObject(125 + ido1, 120, 3, 3, 'rgba(51,255,0,1)', 35, true).opacity(0).id(myo2);
		jc.circle(128 + ido1, 363, 2, 'rgba(0,153,0,1)', true).opacity(0).id(myh1);
		//二つ目の花火
		fireworks(ran, 50, 25, -25, idCanvas);
		jc.myObject(425 + ido1, 130, 3, 3, '#ffff00', 80, true).opacity(0).id(myo3);
		jc.circle(428 + ido1, 383, 2, '#ffff00', true).opacity(0).id(myh2);
		//三つ目の花火
		fireworks(50, ran, 0, 0, idCanvas);
		jc.myObject(725 - ido1, 170, 3, 3, '#ff00ff', 80, true).opacity(0).id(myo4);
		jc.myObject(725 - ido1, 170, 3, 3, '#ff0000', 75, true).opacity(0).id(myo5);
		jc.circle(728 - ido1, 413, 2, '#ff0066', true).opacity(0).id(myh3);
	}
	//開始
	function start_1(idCanvas) {
		jc.start(idCanvas, true);
		hana(idCanvas);
		utiage1('#' + myh1, 230);
		stop1 = setTimeout("hanabi_1('#" + myo1 + "','+=80','-=80','#" + myo2 + "','+=50','-=50');", 1650);
		stop4 = setTimeout("utiage1('#" + myh2 + "',250);", 1750);
		stop2 = setTimeout("hanabi_1('#" + myo3 + "','+=50','-=50');", 3400);
		stop5 = setTimeout("utiage1('#" + myh3 + "',230);", 4050);
		stop3 = setTimeout("hanabi_1('#" + myo4 + "','+=60','-=60','#" + myo5 + "','+=60','-=60');", 5700);
	}
	//花火
	function hanabi_1(mo1, shp1, shm1, mo2, shp2, shm2) {
		jc(mo1).color('rgba(' + color1 + ',' + color2 + ',' + color3 + ',1)').queue(function() {
			this.animate({
				shift : shp1
			}, 1000).fadeIn();
		}, function() {
			this.translate(0, 10, 1000).fadeOut(800);
		}, function() {
			this.animate({
				shift : shm1
			}, 1000).translate(0, -10, 1000);
		});
		if (mo1 !== '#' + myh3) {
			jc(mo2).color('rgba(' + color3 + ',' + color1 + ',' + color2 + ',1)').queue(function() {
				this.animate({
					shift : shp2
				}, 1000).fadeIn();
			}, function() {
				this.translate(0, 10, 1000).fadeOut(800);
			}, function() {
				this.animate({
					shift : shm2
				}, 1000).translate(0, -10, 1000);
			});
		}
	}
	//ランダムカラー
	function colorCage() {
		color1 = Math.floor(Math.random() * 255);
		color2 = Math.floor(Math.random() * 255);
		color3 = Math.floor(Math.random() * 255);
	}
	//打ち上げ
	function utiage1(mh, mm) {
		colorCage();
		jc(mh).color('rgba(' + color1 + ',' + color2 + ',' + color3 + ',1)').queue(function() {
			this.translate(0, -mm, 1500).fadeIn();
		}, function() {
			this.fadeOut(10).translate(0, mm, 500);
		});
	}
	//掛け声
	function voice(idCanvas) {
		kakegoe(idCanvas);
		document.getElementById("click2").disabled = true;//連打されないようにロック
		hollo_1('#' + myt1, -70, 70);
		stop6 = setTimeout("hollo_1('#'+ myt2,70,-70);", 900);
		stop7 = setTimeout(function() {
			document.getElementById("click2").disabled = false;//ロック解除
		}, 2750);
	}
	//たまや～,かぎや～
	function hollo_1(mt, x1, x2) {
		colorCage();
		jc(mt).color('rgba(' + color1 + ',' + color3 + ',' + color2 + ',1)').queue(function() {
			this.scale(2, 2, 2000).translate(x1, -90, 2000).fadeIn();
		}, function() {
			this.fadeOut();
		}, function() {
			this.scale(0.5, 0.5, 100).translate(x2, 90, 10);
		});
	}
	//掛け声準備
	function kakegoe(idCanvas) {
		ido2 = Math.floor(Math.random() * 370);
		myt1 = 'myText_1_' + no2++;
		myt2 = 'myText_2_' + no2;
		jc.start(idCanvas, true);
		//たまや～
		jc.text("たまや～", 195 + ido2, 380, '#ff3300').opacity(0).font('15px Times New Roman').id(myt1);
		//かぎや～
		jc.text("かぎや～", 395 - ido2, 410, '#ffff00').opacity(0).font('10px Times New Roman').id(myt2);
	}
	//花火の形
	function fireworks(a1, a2, a3, a4, idCanvas) {
		jc.addObject('myObject', {
			x : 0,
			y : 0,
			width : 0,
			height : 0,
			color : 'rgba(0,0,0,0)',
			shift : 0
		}, function(ctx) {
			ctx.rect(this._x, this._y + this._shift - a1, this._width, this._height);
			ctx.rect(this._x, this._y - this._shift + a1, this._width, this._height);
			ctx.rect(this._x - this._shift + a1, this._y, this._width, this._height);
			ctx.rect(this._x + this._shift - a1, this._y, this._width, this._height);

			ctx.rect(this._x + (this._shift) * Math.cos(45 / 180 * Math.PI) - a2, this._y + (this._shift) * Math.sin(45 / 180 * Math.PI) - a2, this._width, this._height);
			ctx.rect(this._x - (this._shift) * Math.cos(45 / 180 * Math.PI) + a2, this._y - (this._shift) * Math.sin(45 / 180 * Math.PI) + a2, this._width, this._height);
			ctx.rect(this._x - (this._shift) * Math.cos(45 / 180 * Math.PI) + a2, this._y + (this._shift) * Math.sin(45 / 180 * Math.PI) - a2, this._width, this._height);
			ctx.rect(this._x + (this._shift) * Math.cos(45 / 180 * Math.PI) - a2, this._y - (this._shift) * Math.sin(45 / 180 * Math.PI) + a2, this._width, this._height);

			ctx.rect(this._x + (this._shift) * Math.cos(25 / 180 * Math.PI) - a3, this._y + (this._shift) * Math.sin(25 / 180 * Math.PI) - a3, this._width, this._height);
			ctx.rect(this._x - (this._shift) * Math.cos(25 / 180 * Math.PI) + a3, this._y - (this._shift) * Math.sin(25 / 180 * Math.PI) + a3, this._width, this._height);
			ctx.rect(this._x - (this._shift) * Math.cos(25 / 180 * Math.PI) + a3, this._y + (this._shift) * Math.sin(25 / 180 * Math.PI) + a4, this._width, this._height);
			ctx.rect(this._x + (this._shift) * Math.cos(25 / 180 * Math.PI) - a3, this._y - (this._shift) * Math.sin(25 / 180 * Math.PI) - a4, this._width, this._height);

			ctx.rect(this._x + (this._shift) * Math.cos(65 / 180 * Math.PI) - a3, this._y + (this._shift) * Math.sin(65 / 180 * Math.PI) - a3, this._width, this._height);
			ctx.rect(this._x - (this._shift) * Math.cos(65 / 180 * Math.PI) + a3, this._y - (this._shift) * Math.sin(65 / 180 * Math.PI) + a3, this._width, this._height);
			ctx.rect(this._x - (this._shift) * Math.cos(65 / 180 * Math.PI) + a3, this._y + (this._shift) * Math.sin(65 / 180 * Math.PI) + a4, this._width, this._height);
			ctx.rect(this._x + (this._shift) * Math.cos(65 / 180 * Math.PI) - a3, this._y - (this._shift) * Math.sin(65 / 180 * Math.PI) - a4, this._width, this._height);
		});
	}
	function onload_1(idCanvas) {
		var img = new Image();
		img.src = "/static/image/bg_fireworks01.jpg";
		img.onload = function() {
			jc.start(idCanvas, true);
			jc.image(img, 50, 100);
		}
	}
</script>
</head>
<body onload="onload_1('canvas_1')">
	<canvas id="canvas_1" width="1250px" height="465px">
</canvas>
	<form name="F1" action="#" id="F1">
		<input type="button" value="開始" onclick="start_1('canvas_1')"
			id="click1" name="click1"> <input type="button" value="掛け声"
			onclick="voice('canvas_1')" id="click2" name="click2">
	</form>
</body>
</html>